<template>
  <div class="create-goods">
    <div class="title">
      <h2>基础信息</h2>
    </div>
    <div class="goodsnm">
      <span>商品名称</span>
      <div class="ipt">
        <el-input v-model="goodsnm" placeholder="请输入商品名称" />
      </div>
    </div>
    <UploadBox :size="'主图'" :multiple="true" @upload-img="mainFunc" />
    <UploadBox :size="'轮播图'" :multiple="false" @upload-img="bannerFunc" />
    <UploadBox :size="'商品图'" :multiple="false" @upload-img="goodsFunc" />
    <div class="goodsInfo-table">
      <span>商品规格</span>
      <table>
        <thead>
          <tr>
            <th>价格</th>
            <th>库存</th>
            <th>型号</th>
            <th>重量</th>
            <th>商品分类</th>
            <th>额定电压</th>
            <th>最大瓦数</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><el-input v-model="price" placeholder="请输入" /></td>
            <td><el-input v-model="count" placeholder="请输入" /></td>
            <td><el-input v-model="modeltype" placeholder="请输入" /></td>
            <td><el-input v-model="weight" placeholder="请输入" /></td>
            <td><el-input v-model="classify" placeholder="请输入" /></td>
            <td><el-input v-model="voltage" placeholder="请输入" /></td>
            <td><el-input v-model="power" placeholder="请输入" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="putaway">
      <span>上架状态</span>
      <div class="radio">
        <el-radio-group v-model="radio">
          <el-radio :label="0">上架</el-radio>
          <el-radio :label="1">下架</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
  <!-- 对话框 -->
  <div class="dialog" v-if="dialogcode">
    <div class="dialog-text">
      <h3 class="title">提示</h3>
      <div class="msg">
        <span>确认提交</span>
      </div>
      <div class="btn">
        <el-button type="primary" @click="verify">确定</el-button>
        <el-button type="danger" plain @click="closebtn">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineComponent } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import UploadBox from "@/components/UploadBox.vue";
import router from "@/router";
// 导入组件
defineComponent({
  UploadBox,
});

let mainInfo = reactive([]); // 主图图片信息
let bannerInfoList = reactive([]); // 轮播图图片信息列表
let goodsInfoList = reactive([]); // 商品图片信息列表
let bannerImgSrc = reactive([]);
let goodsImgSrc = reactive([]);
let mainImgSrc = reactive([]);
let goodsnm = ref(""); // 商品名称输入内容
let dialogcode = ref(false); // 对话框显示状态
let price = ref(""); // 价格
let count = ref(""); // 库存
let modeltype = ref(""); // 型号
let weight = ref(""); // 重量
let classify = ref(""); // 商品分类
let voltage = ref(""); // 电压
let power = ref(""); // 瓦数
let radio = ref(0); // 单选框按钮状态
// 获取主图图片数据
const mainFunc = (params) => {
  let { imgInfoList } = params;
  mainInfo = imgInfoList;
};
// 获取轮播图图片数据
const bannerFunc = (params) => {
  let { imgInfoList } = params;
  bannerInfoList = imgInfoList;
};
// 获取商品图片数据
const goodsFunc = (params) => {
  let { imgInfoList } = params;
  goodsInfoList = imgInfoList;
};
// 提交按钮点击事件
let submit = () => {
  mainInfo.forEach((i) => {
    let fromData = new FormData();
    fromData.append("file", i);
    axios
      .post("http://192.168.27.59/goods/upload", fromData, {
        headers: {
          "Content-Type": "multipart/from-data",
        },
      })
      .then((res) => {
        mainImgSrc = res.data.src;
      });
  });
  bannerInfoList.forEach((i) => {
    let fromData = new FormData();
    fromData.append("file", i);
    axios
      .post("http://192.168.27.59/goods/upload", fromData, {
        headers: {
          "Content-Type": "multipart/from-data",
        },
      })
      .then((res) => {
        bannerImgSrc.push(res.data.src);
      });
  });
  goodsInfoList.forEach((i) => {
    let fromData = new FormData();
    fromData.append("file", i);
    axios
      .post("http://192.168.27.59/goods/upload", fromData, {
        headers: {
          "Content-Type": "multipart/from-data",
        },
      })
      .then((res) => {
        goodsImgSrc.push(res.data.src);
      });
  });
  dialogcode.value = true;
};
// 取消按钮点击事件
let cancel = () => {
  router.push({
    path: "/home/goodslist",
  });
};

// 确认提交确认按钮
let verify = () => {
  // 随机生成一个ID
  let rdmNum = "";
  for (let i = 0; i < 9; i++) {
    rdmNum += Math.floor(Math.random() * 10); // [0,10)的整数
  }
  if (
    bannerImgSrc.length == bannerInfoList.length &&
    goodsImgSrc.length == goodsInfoList.length
  ) {
    let uploadObj = {
      id: rdmNum,
      goodsnm: goodsnm.value,
      price: price.value,
      count: count.value,
      modeltype: modeltype.value,
      weight: weight.value,
      classify: classify.value,
      voltage: voltage.value,
      power: power.value,
      code: radio.value,
      img: mainImgSrc,
      bannerimg: JSON.stringify(bannerImgSrc),
      introimg: JSON.stringify(goodsImgSrc),
    };
    axios
      .post("http://192.168.27.59/goods/addgoods", {
        uploadObj,
      })
      .then(({ data }) => {
        if (data.code == 200) {
          ElMessage({
            message: data.message,
            type: "success",
          });
          dialogcode.value = false;
          location.reload(true);
        } else {
          ElMessage.error("添加商品失败");
        }
      });
  }
};
// 确认提交取消按钮
let closebtn = () => {
  dialogcode.value = false;
};
</script>

<style lang="scss" scoped>
.create-goods {
  width: 60vw;
  margin: 0 auto;
  background-color: #fff;
  padding: 15px;
  border-radius: 0.625rem;
  .title {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
  }
  span {
    font-size: 13px;
    white-space: nowrap;
    width: 70px;
  }
  .goodsnm {
    display: flex;
    align-items: center;
    margin: 0.625rem 0;
    .ipt {
      width: 15vw;
    }
  }
  .goodsimg,
  .bannerimg {
    display: flex;
    align-items: center;
    .img-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 56vw;
      .img-btn {
        width: 120px;
        height: 120px;
        overflow: hidden;
        background: url(../assets/dotted.svg) no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0.625rem;
        margin-left: 0;
        em {
          font-size: 3.75rem;
          color: #999;
          padding-bottom: 0.3125rem;
        }
        input {
          width: 100%;
          height: 100%;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .img-box {
        width: 7.5rem;
        height: 7.5rem;
        overflow: hidden;
        background: url(../assets/dotted.svg) no-repeat;
        background-size: cover;
        margin: 0.625rem;
        margin-left: 0;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
        }
        .item-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 0.3125rem;
          background-color: rgba($color: #000000, $alpha: 0.2);
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            width: 20px;
            height: 20px;
            font-size: 20px;
            margin: 0 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .goodsInfo-table {
    display: flex;
    align-items: center;
    margin-top: 0.625rem;
    thead {
      background-color: #ccc;
      height: 40px;
      line-height: 40px;
    }
    table,
    table tr th,
    table tr td {
      border: 1px solid #ccc;
    }
    table {
      width: 56vw;
      tbody {
        margin-top: 6.25rem;
        tr {
          td {
            padding: 0 0.625rem;
            height: 3.75rem;
            line-height: 3.75rem;
          }
        }
      }
    }
  }
  .putaway {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
  }
  // 按钮
  .btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 1.625rem;
    button {
      width: 6rem;
    }
  }
}
.blowUp-img {
  min-width: 100%;
  min-height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.4);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .quit-blowUp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .img-box {
    width: 26vmax;
    height: 26vmax;
    background-color: #fff;
    border-radius: 1.25rem;
    margin-bottom: 6.25rem;
    overflow: hidden;
    position: relative;
    z-index: 999;
    img {
      width: 100%;
    }
  }
}
.dialog {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  .dialog-text {
    width: 35%;
    height: 30%;
    background-color: #fff;
    margin-bottom: 10%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    .title {
      font-size: 20px;
    }
    .msg {
      text-align: center;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
